/******************************************************************
 * Copyright @ 2023 广州牛师帮科技文化有限公司. All rights reserverd.
 * @file   src\component\ChangeLog\index.tsx
 * @author 朱剑豪
 * @date   2023/02/23 22:57
 * @desc   请求并显示ChangeLog
 * 
 * @usage   
 *          import ChangeLog from '@/component/ChangeLog';
 *          function AnyComponent(){
 *            // ChangeLog.Component与div具有相同属性与行为。
 *            return <ChangeLog.Component/>
 *          }
 ******************************************************************/

import { CancelHolder, http, RequestConfig } from '@/network';
import { marked } from "marked";
import React, { useEffect, useState } from "react";

namespace ChangeLog {

  /**
   * ComponentProps
   *
   * @export
   * @interface ComponentProps
   * @extends {React.HTMLAttributes<HTMLDivElement>}
   */
  export interface ComponentProps extends React.HTMLAttributes<HTMLDivElement> { }

  /**
   * Component
   *
   * @export
   * @param {ComponentProps} props
   * @return {React.ReactElement} {React.ReactElement}
   */
  export function Component(props: ComponentProps): React.ReactElement {
    const [changeLog, setChangeLog] = useState('')

    useEffect(() => {
      const canceller = new CancelHolder;
      const config: RequestConfig = {
        ...canceller.signals(),
        url: '/CHANGELOG.md',
        params: { time: __BUILD_TIMESTAMP__ }
      }

      http.GET<string>(config)
        .then(v => marked(v.data))
        .then(setChangeLog);

      return canceller.cancel
    }, [])

    return (
      <div dangerouslySetInnerHTML={{ __html: changeLog }} {...props} />
    )
  }
}

export default ChangeLog;